<template>
  <div class="home-life">
    <div class="bgcolor"></div>
    <h4 class="title">--更多服务--</h4>
    <div class="list">
      <div class="item" v-for="item in enters" :key="item.imgUrl">
        <router-link :to="{name:item.href}">
          <img :src="item.imgUrl" alt="item.title">
          <h4>{{item.title}}</h4>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'iousService',
  data () {
    return {
      enters: [
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t4609/245/3975151339/11019/766e751d/590aca78Nf15a7947.png?width=135&height=135',
          title: '小白卡'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t5269/224/1031852465/12646/40e0f799/590aca55N22a6f274.png?width=135&height=135',
          title: '白条商城'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t5095/216/1045040184/12370/564ae632/590ac7deN9a0eac2a.png?width=135&height=135',
          title: '消费分期'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t8311/300/1385281399/9501/130a0046/59b8da06N14f62cf3.png?width=120&height=120',
          title: '借钱'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t5488/298/1036263348/12073/b4f4de97/590ac8e8Ne9def22e.png?width=135&height=135',
          title: '白条提额'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t4417/98/4154366136/13785/5433ca92/590ac8afN5dd91d6e.png?width=135&height=135',
          title: '白条闪付'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t4453/75/4132459214/14188/939b7f34/590ac860N752d5738.png?width=135&height=135',
          title: '小白会玩'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t5371/323/1038197138/12031/3ec72f6c/590aca20N089fd34a.png?width=135&height=135',
          title: '钢镚'}]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/css/varibles.styl'
  @import '../../assets/css/mixins.styl'
  .bgcolor
    pdTop()
  .title
    jdTitle()
  .list
    margin-top:.2rem
    height:3rem
    width: 100%
    .item
      display:inline-block
      width:25%
      height:1.44rem
      text-align:center
      line-height:.4rem
      h4
        ellipse()
      img
        width:.9rem
        height:.9rem
      a
        display:block
        text-decoration:none
        color:#666
        font-size:.24rem
</style>
